<template class="content">
  <div style="display: flex;flex-direction: column;align-items: center;" >
    <div class="top">
      <div style="padding: 40px 0;">
        <el-input style="width:200px" placeholder="请输入文章名称" suffix-icon="el-icon-search" v-model="name"></el-input>
        <el-button  style="margin-left: 10px" type="primary" @click="load"> <icon class="el-icon-search"></icon> 搜索</el-button>
        <el-button  style="margin-left: 10px" type="warning" @click="reset"><icon class="el-icon-refresh"></icon> 重置</el-button>
        <el-button  style="margin-left: 10px" type="info" @click="$router.push('/newArticleOfPersonal?id='+user.id)"><icon class="el-icon-user"></icon>  个人博客主页</el-button>
        <router-link to="/category"><el-button  style="margin-left: 10px" type="info" ><icon class="el-icon-reading"></icon>  专题</el-button></router-link>
        <router-link to="/myCollection"><el-button  style="margin-left: 10px" type="warning" ><icon class="el-icon-connection"></icon> 我的收藏</el-button></router-link>
        <router-link to="/blogPersionalManage"><el-button  style="margin-left: 10px" type="warning" ><icon class="el-icon-paperclip"></icon> 创作管理</el-button></router-link>
        <router-link to="/ResourceDownload"><el-button  style="margin-left: 10px" type="primary" ><icon class="el-icon-takeaway-box"></icon> 资源下载</el-button></router-link>

        <el-dropdown style="cursor: pointer;text-align: center;">
          <el-button  type="primary" style="height: 30px;margin-left: 40px;width: 150px;height: 40px;font-size: 14px" round>
            <i class="el-icon-edit" style="padding-right:10px " >  创作中心</i>
          </el-button>
          <el-dropdown-menu slot="dropdown" style="width: 160px;height: 80px;">
            <div style="float: left;height: 100%;width: 50%;text-align: center;border-right: #cccccc 2px solid;cursor: pointer" @click="articleRelease">
              <div style="height: 40px;width: 40px; margin-left: 20px;margin-top: 10px;text-align: center">
                <img src="../../assets/maobi.png" style="margin: 0px auto;">
              </div>
              <div>
                <span style="color: #409EFF;font-size: 10px;text-align: center" >发布文章</span>
              </div>
            </div>
            <li style="display: block; float: left;height: 100%;width: 50%;text-align: center;cursor: pointer;">
              <a href="/ResourceUpload" style="text-decoration: none">
                <div style="height: 40px;width: 40px; margin-left: 20px;margin-top: 10px;text-align: center;">
                  <img src="../../assets/uploadUser.png" style="margin: 0px auto">
                </div>
                <div>
                  <span style="color: #409EFF;font-size: 10px;text-align: center" >上传资源</span>
                </div>
              </a>
            </li>

          </el-dropdown-menu>
        </el-dropdown>
      </div>

    </div>

    <!--   文章-->
    <div class="MainBodyOfArticle">
      <!--    左侧主题文章展示部分-->
      <div class="leftSide" >
        <div  v-for="item in tableData" :key="item.id" style="display: flex;border-radius: 20px;margin-bottom:10px;">
         <div class="leftdetail"style="width: 60%;height: 100%;background-color: #f3ecec;display: inline-block;border-top-left-radius: 30px">
           <!--                文章头部信息-->
           <div style="margin-top: 20px ;font-size: 18px;color: #222226;font-weight: 600;padding: 0 30px;overflow: hidden;display: flex;align-items: center;cursor: pointer"  @click="$router.push('/blogDetails?id='+item.id)">
             <span class="aaabbb">{{item.name}}</span>
           </div>
           <!--                文章简介-->
           <div style="font-size: 14px;color: #99999A;margin-top: 10px ;padding: 10px 30px;overflow: hidden">
             {{item.summary}}
           </div>
           <!--                文章阅读次数以及其他-->
           <div style="display: flex;align-items: center;padding: 0 30px;font-size: 14px;color: #999aaa;margin-top: 50px;">
             <!--                阅读次数-->
             <div style="flex: 10">
               <icon class="el-icon-user"></icon>
               {{item.user}}
             </div>
             <!--                    作者名称-->
             <div style="">
               <i class="el-icon-view" style="margin-right: 5px"></i>{{item.readnumber}}
             </div>
             <!--                  发布时间-->
            &nbsp; &nbsp; &nbsp; <div style="">
             <icon class="el-icon-date"></icon>
                {{item.time}}
             </div>
           </div>
         </div>
          <div class="rightdetail" style="display: inline-block;width: 40%;height: 200px;border-top-right-radius: 30px">
             <img :src="item.cover" style="width: 100%;height: 100%;border-bottom-right-radius: 30px"/>
          </div>
        </div>

      </div>
      <!--    右侧推荐部分-->
      <div class="rightSide">
        <!--推荐作者-->
        <div style="flex: 1;display: flex;flex-direction: column;background: #cadcf5;border-radius: 20px">
          <!--            推荐作者标题-->
          <div style="flex: 2;display: flex;align-items: center ;padding: 10px 30px;font-size: 16px;border-bottom: 2px dotted #fff2f2;color: #076de0;margin-bottom: 8px;">
            推 荐 作 者
          </div>
          <!--           作者列表-->
          <div style="flex: 6;flex-direction: column;">
            <div v-for="item in recommandUser" style="flex: 1;display: flex;padding: 5px 20px" class="authors"  @click="$router.push('/newArticleOfPersonal?id='+item.id)" >

              <!--                头像-->
              <div style="flex: 1">
                <el-image :src="item.avatarUrl" style="width: 45px; height: 45px; border-radius: 50%;flex: 1;cursor: pointer "></el-image>
              </div>
              <!--                网名和信息-->
              <div style="flex: 6;display: flex;flex-direction: column;justify-items: center">
                <!--                    nickname-->
                <div style="flex: 1;color: #222226;font-size: 14px">
                  {{item.nickname}}
                </div>
                <!--                    简介-->
                <div style="flex: 2;color: #999aaa;font-size: 12px;padding-top: 5px; padding-left: 5px;padding-right: 5px ;overflow: hidden">
                  {{item.brief}}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--        推荐文章-->
        <div style="display: flex;flex-direction: column; background: #cbddf5;height: 800px;border-radius: 20px">
          <!--                板块标题-->
          <div style="flex: 2;display: flex;align-items: center;padding: 0px 30px;font-size: 16px;border-bottom: 1px solid #F2F2F2;color: #1564dc;">
            推 荐 文 章
          </div>
          <!--            推荐文章信息-->
          <div class="aaabbb" v-for="item in recommandArticle" style="display: flex;flex: 4;flex-direction: column;cursor: pointer" @click="$router.push('/blogDetails?id='+item.id)">
            <div style="display: flex;flex: 3;flex-direction: column;justify-items: center;padding: 10px 10px;border-bottom: 1px dotted white;" class="recommendArtical">
              <!--文章标题-->

              <div style="flex: 2;font-size: 16px;color: #222226;font-weight: 500;overflow: hidden;text-overflow: ellipsis;padding:0px 5px;" >
                <span style="overflow: hidden; white-space: nowrap;text-overflow: ellipsis;">{{item.name}}</span>
              </div>
              <!--        文章简介-->
              <div style="font-size: 13px;color: #999aaa;flex: 2;padding: 0 5px;overflow: hidden;">
                <span style="overflow: hidden; white-space: nowrap;text-overflow: ellipsis;">  {{item.summary}}</span>
              </div>
              <!--        文章信息-->
              <div style="flex: 1;display: flex;align-items: center;font-size: 12px;color: #999aaa">
                <!--            浏览次数-->
                <div style="padding-left: 5px;flex: 6;">
                  <i class="el-icon-view" style="margin-right: 5px"></i>{{item.readnumber}}
                </div>
                <!--            作者-->
                <div style="padding-right: 5px">
                <span>
                    {{item.user}}
                </span>
                  <span style="margin-left: 5px">
                    {{item.time}}
                </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div style="padding: 1px 0px;margin-right:293px; width: 1007px">
      <el-pagination
          style="background-color: #ffffff"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[7,10]"
          :page-size="pageSize"
          layout="total,  prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios, {Axios as request} from "axios";

export default {
  name: "Article",
  data(){
    return {
      tableData: [],
      total:0,
      pageNum:1,
      pageSize:7,
      sideWidth:200,
      name:"",
      type:"",
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      multipleSelection:[],
      form:{},
      dialogFormVisible:false,
      viewDialogVis: false,
      recommandUser:[],
      recommandArticle:[],
    }
  },
  created() {
    this.load()
    // this.loadRecommodUser()
    // this.loadRecommandArticleInfor()
  },
  methods:{
    // articleRelease(){
    //   this.$router.push("/writeblog")
    // },
    view(content) {
      this.content = content
      this.viewDialogVis = true
    },
    // loadRecommandArticleInfor(){
    //   this.request.get("/article/recommandArticle").then(res=>{
    //     this.recommandArticle = res.data
    //   })
    // },
    // 绑定@imgAdd event
    imgAdd(pos, $file) {
      let $vm = this.$refs.md
      // 第一步.将图片上传到服务器.
      const formData = new FormData();
      formData.append('file', $file);
      axios({
        url: 'http://localhost:9091/file/upload',
        method: 'post',
        data: formData,
        headers: {'Content-Type': 'multipart/form-data'},
      }).then((res) => {
        // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
        $vm.$img2Url(pos, res.data);
      })
    },

    load(){
      this.request.get("/article/page",{
        params: {
          pageNum: this.pageNum,
          pageSize:this.pageSize,
          name:this.name,
        }
      }).then(res=>
      {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
      //将数据转化为json
    },

    handleSizeChange(pageSize){
      // console.log(pageSize)
      this.pageSize=pageSize
      //之后请求数据
      this.load()
    },
    handleCurrentChange(pageNum){
      console.log(pageNum)
      this.pageNum=pageNum
      this.load()
    },

    reset(){
      this.name = null;
      this.type = null;
      this.load()
    },

    handleSelectionChange(val){
      this.multipleSelection = val
    },
    loadRecommodUser(){
      this.request.get("/user/recommandUser").then(res=>{
        this.recommandUser = res.data;
      })
    }


  }
}
</script>

<style scoped>
.top{
  height: 100px;
  width: 100%;
  background-image: url("../../assets/micro_bg.png");
  background-position:center;
  background-size: 100%;
  text-align: center;
  margin-bottom: 10px;
}
.MainBodyOfArticle{
  width: 80%;
  display: flex;
  gap: 20px;
  justify-content: center;
}
.leftSide{
  flex: 12;
  display: flex;
  flex-direction: column;
}
.rightSide{
  flex: 3;
  gap: 20px;
  display: flex;
  flex-direction: column;
  height: 980px;
}
.aaabbb:hover{
  color: rgb(169, 204, 241);
}
.authors:hover{
  border-radius: 20px;
  background-color: #ecc4c4;
}
.recommendArtical:hover{
  border-radius: 20px;
  background-color: #ecc4c4;
}
.content::-webkit-scrollbar { width: 0 !important }
</style>